<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <title>首页</title>
</head>
<body>
    <header>
        <h4>上证指数竞猜涨跌</h4>
    </header>
    <main class="home_main">   
        <!--轮播图  -->
       <ul class="home_lun">
           <li class="zindex">
                <img src="img/lun.png" alt="">
           </li>
            <li>
                <img src="img/lun.png" alt="">
           </li>
             <li>
                <img src="img/lun.png" alt="">
           </li>
       </ul>
        <ul class="indicator">

        </ul>
    </main>
    <!--内容  -->
    <section class="home_cont" id="app">
        <!--开头  -->
        <div class="homeDate_dian">
             <h4>{{ huabi.month }}月{{ huabi.day }}日上证指数<span class="date_dw">{{huabi.shoupan}}</span></h4> 
        </div>  
        <!-- 猜开盘时 -->
        <div v-if='isDate'>
            <!-- 竞猜pk数据层 -->
            <div class="homeDate_jing">
                <h5>{{ huabi.month }}月{{ huabi.day }}日上证指数开盘竞猜总奖金池</h5>
                <h3><span>{{ huabi.total }}</span>牛牛币</h3>
            </div>
            <!-- 猜开盘  -->
            <div class="pad">
                <!-- 状态条 -->
                <div class='homeDate_zhuang' >
    
                    <div class="dib gaokai" v-bind:style="{width:huabi.gaokai + '%'}"></div>
                    <div class="dib dikai" v-bind:style="{width:huabi.dikai +'%'}"></div>
                </div>
                 <!-- 文字 -->
                <div class="pt20">
                    <div class="w50">
                        <p><span class="gaokai_title">高开</span>{{ huabi.gaokai }}%</p>
                    </div>
                    <div class="w50">
                        <p class="vs"> vs</p>
                    </div>
                    <div class="w50">
                        <p class="text_right">{{ huabi.dikai }}%<span class="dikai_title">低开</span></p>
                    </div>
                </div>
                 <!-- 收益 -->
                <div class="pt20 pad" >
                    <div class="dib w50">
                        <p><span class="gaokai_title">1:{{ huabi.gaokaishouyibi }}</span></p>
                    </div>
                    <div class="w50">
                        <p class="svs"> 收益比</p>
                    </div>
                    <div class="dib w50">
                        <p class="text_right"><span class="dikai_title">1:{{ huabi.dikaishouyibi }}</span></p>
                    </div>
                </div>

                 <!--高开低开-->
                <div class="ge_lv">
                        <div class="lv_cont1">
                            <div class="ying_left"  @click="gaokai">
                                <h5>高开</h5>
                            </div>
                        </div>
                        <div class="ge_ko">
                            距离竞猜结束还剩 
                            <span id="ten" style="color:red;display:block;">{{huabi.daoji}}</span>
                            
                        </div>
                        <div class="lv_cont2">

                            <div class="ying_right"  @click="dikai">
                                <h5>低开</h5>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <!--开盘中间  -->
        <div  v-if='isDao' class="isdao">
                <!--上  -->
                <div class="dao_title">
                    <h3>竞猜已结束</h3>
                    <h5>总奖金池: <span>{{ huabi.total }}</span></h5>
                </div>
                <div class="dao_kan">
                        <div class="kan_cont1">
                            <div class="kan_left wid">
                                <h5>高开</h5><span>1:{{ huabi.gaokaishouyibi }}</span>
                            </div>
                            <hr class="kan_height">
                        </div>
                        <p class="dao_vs">
                            <span class="vs_dates">VS</span>
                        </p>
                        <div class="kan_cont2">
                            <hr class="right_height ">
                            <div class="kan_right wid">
                                <h5>低开</h5><span>1:{{ huabi.dikaishouyibi }}</span>
                            </div>
                        </div>
                </div>
                <div class="weican">
                     <p>
                         您好，开盘猜高开在当天16：00至第二天9：00时间段可以竞猜。
                    </p> 
                </div>
        </div>
        <!-- 结果 -->
        <div v-if='isKai_jie'>
           
            <h5 class="jie_title">{{ huabi.month }}月{{ huabi.day }}日大盘竞猜结果</h5>
            <div class="jie_bei">
                <div class="jie_shang">
                    <h4 class="jie_shang_left">{{jie.jieguo}}</h4><h4 class="jie_shang_right">1:{{jie.bili}}</h4>
                </div>
                <div class="jie_xia">
                    <h5 class="jiexia_title">本期我的总盈亏</h5>
                    <span class="jie_qianshu"><span style="font-size:2rem;">{{jie.qianshu}}</span>牛牛币</span>
                    <a class="jiexia_cha" href="about.html">查看明细></a>
                </div>
           </div>
            <div class="jie_ll">
                 <p>竞猜赢取的牛牛币到账会有延迟，请耐心等待。</p>
                <span class="wei_time">下一轮竞猜将在{{jie.time}}进行</span>
            </div>
           
        </div>   


        <!--收盘  -->
        <div v-if='isTurn'>
            <!-- 竞猜pk数据层 -->
            <div class="homeDate_jing">
                <h5>{{ huabi.month }}月{{ huabi.day }}日上证指数收盘竞猜总奖金池</h5>
                <h3><span>{{ huabi.total }}</span>牛牛币</h3>
            </div>
            <!-- 猜收盘  -->
            <div class="pad">
                <!-- 状态条 -->
                <div class='homeDate_zhuang'>
                    <div class="dib gaokai" v-bind:style="{width:huabi.gaokai + '%'}"></div>
                    <div class="dib dikai" v-bind:style="{width:huabi.dikai +'%'}"></div>
                </div>
                 <!-- 文字 -->
                <div class="pt20">
                    <div class="w50">
                        <p><span class="gaokai_title">看涨</span>{{ huabi.gaokai }}%</p>
                    </div>
                    <div class="w50">
                        <p class="vs"> vs</p>
                    </div>
                    <div class="w50">
                        <p class="text_right">{{ huabi.dikai }}%<span class="dikai_title">看跌</span></p>
                    </div>
                </div>
                 <!-- 收益 -->
                <div class="pt20 pad" >
                    <div class="dib w50">
                        <p><span class="gaokai_title">1:{{ huabi.gaokaishouyibi }}</span></p>
                    </div>
                    <div class="w50">
                        <p class="svs"> 收益比</p>
                    </div>
                    <div class="dib w50">
                        <p class="text_right"><span class="dikai_title">1:{{ huabi.dikaishouyibi }}</span></p>
                    </div>
                </div>

                 <!--高开低开-->
                <div class="ge_lv">
                        <div class="lv_cont1">
                            <div class="ying_left"  @click="gaokai">
                                <h5>看涨</h5>
                            </div>
                        </div>
                        <div class="ge_ko">
                              距离竞猜结束还剩 
                            <span id="tens" style="color:red;display:block;">{{huabi.daojis}}</span>
                            {{huabi.month}}月{{huabi.day}}日13：00竞猜截止。
                        </div>
                        <div class="lv_cont2">

                            <div class="ying_right"  @click="dikai">
                                <h5>看跌</h5>
                            </div>
                        </div>
                </div>
            </div>
        </div>

         <!--收盘中间  -->
        <div  v-if='isTurns' class="isdao">
                <!--上  -->
                <div class="dao_title">
                    <h3>竞猜已结束</h3>
                    <h5>总奖金池: <span>{{ huabi.total }}</span></h5>
                </div>
                <div class="dao_kan">
                        <div class="kan_cont1">
                            <div class="kan_left wid">
                                <h5>看涨</h5><span>1:{{ huabi.gaokaishouyibi }}</span>
                            </div>
                            <hr class="kan_height">
                        </div>
                        <p class="dao_vs">
                            <span class="vs_dates">VS</span>
                        </p>
                        <div class="kan_cont2">
                            <hr class="right_height">
                            <div class="kan_right wid">
                                <h5>看跌</h5><span>1:{{ huabi.dikaishouyibi }}</span>
                            </div>
                        </div>
                </div>
                <div class="weican">
                     <p>
                          您好，收盘猜涨在当天10：00至13：00时间段可以竞猜。
                    </p> 
                </div>
        </div>




        <!--点击显示  -->
        <!--高开  -->
         <div class="screen">
            <!-- 高开 -->
            <div class="zhe_ceng">
                    <div class="gao_title">
                        <h5>{{huabi.cai}}</h5>
                    </div>
                    <form action="" >
                        <input class="gao_money"  v-model="GKM"  type="text" placeholder="请输入下注金额">
                        <div >
                            <button class="jisuan" @click='si'>50</button >
                            <button class="jisuan" @click='ban'>100</button>
                            <button class="jisuan" @click='man'>500</button>
                        </div>
                        <ul class="keyong">
                            <li>
                                <h5>可用牛牛币</h5>
                                <span id="ke_money">{{huabi.money}}</span>
                            </li>
                        </ul>
                        <button class="xiazhu"  @click='reqGk'>立即下注</button>
                    </form>
                    <div class="guan" @click="back">
                        <span>X</span>
                    </div>
            </div>
        </div>
        <!-- 低开 -->
        <div class="screens">
            <!--低开 -->
            <div class="zhe_ceng">
                    <div class="gao_title">
                        <h5>{{huabi.cai2}}</h5>
                    </div>
                    <form action="" >
                        <input class="gao_moneys" v-model="DKM" type="text" placeholder="请输入下注金额">
                        <div >
                            <button class="jisuan" @click='sis'>50</button >
                            <button class="jisuan" @click='bans'>100</button>
                            <button class="jisuan" @click='mans'>500</button>
                        </div>
                        <ul class="keyong">
                            <li>
                                <h5 >可用牛牛币</h5>
                                <span id="ke_money">{{huabi.money}}</span>
                            </li>
                        </ul>
                        <button class="xiazhu"  @click='reqDk'>立即下注</button>
                    </form>
                    <div class="guan" @click="back">
                        <span>X</span>
                    </div>
            </div>
        </div>
    </section>
   
    
    <!--底部导航  -->
    <footer>
         <a href="home.html">首页</a>   
         <a href="yiyuan.html">0元夺宝</a>  
         <a href="dhzq.html">兑换专区</a>  
         <a href="about.html">个人中心</a>  
    </footer>
</body>
 <script src="js/shuju.js"></script> 
<script src="js/lun.js"></script>

</html>